{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@IcsocUIBundle/Resources/public/css/bootstrap.my.css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
{% if user_type == 0 %}
<div class="row" style="margin: 1px;">
    {% if is_call_show == 1 %}
        <!-- 显示呼叫中心话务数据Begin -->
        <div class="row" style="margin:1px;">
            {% for key,value in call_center %}
                <div class="progress" style="height:80px">
                    {% for call in value %}
                        <div class="progress-bar" style="background-color: {{ call.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ call.rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span style="font: 180% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important">{{ call.name }}</span><br>
                            <span style="font: 200% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important;" id="{{ call.id }}">0</span>
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
        <!-- 显示呼叫中心话务数据End -->
    {% endif %}
    {% if isEnableGroup == 1 %}
    <div class="tabbable">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active" id="que_active">
                <a href="#que" data-toggle="tab">按技能组</a>
            </li>
            <li id="group_active">
                <a href="#group" data-toggle="tab">按业务组</a>
            </li>
        </ul>
        <div class="tab-content no-border">
            <div class="tab-pane in active" id="que">
                <div class="row" style="margin:1px;">
                    <!-- 显示技能组话务数据Begin -->
                    {% if is_que_show == 1 %}
                        {% for key,que in que_agInfo %}
                            <!-- 创建panel BEGIN-->
                            <div class="panel panel-info" id="que{{ que.id }}">
                                <div class="panel-heading">{{ que.que_name }}</div>
                                <div class="panel-body" style="padding: 2px;">
                                    {% for key,value in que_center %}
                                        <div class="progress" style="height:80px">
                                            {% for ques in value %}
                                                <div class="progress-bar" style="width: {{ ques.rate }};background-color: {{ ques.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                                    <span class="sr-only"> 10% Complete (success) </span>
                                                    <span style="font: 180% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important">{{ ques.name }}</span><br>
                                                    <span style="font: 200% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important" id="que{{ que.id }}_{{ ques.id }}">0</span>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    {% endfor %}
                                    {% if is_agent_show == 1 %}
                                        <div class="progress" style="height: 100%; padding-left: 0px;">
                                            <div class="progress-bar" style="background-color: {{ agentStyle[1].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[1].background }} !important">1</span>
                                            </div>
                                            <div class="progress-bar" style="background-color: {{ agentStyle[41].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[41].background }} !important">1</span>
                                            </div>
                                            <div class="progress-bar" style="background-color: {{ agentStyle[42].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[42].background }} !important">1</span>
                                            </div>
                                            {% if agent_center.busy.if_hasreason == 1 %}
                                                {% for busy in agent_center.busy.busy_data %}
                                                    <div class="progress-bar" style="background-color: {{ busy.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                        <span class="sr-only"> 10% Complete (success) </span>
                                                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ busy.style.background }} !important">1</span>
                                                    </div>
                                                {% endfor %}
                                            {% else %}
                                                <div class="progress-bar" style="background-color: {{ agentStyle[2].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                    <span class="sr-only"> 10% Complete (success) </span>
                                                    <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[2].background }} !important">1</span>
                                                </div>
                                            {% endif %}
                                            <div class="progress-bar" style="background-color: {{ agentStyle[5].background }};box-shadow: none;padding: 3px;line-height: 20px;width: {{ rates.agent_rate }}">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[5].background }} !important">1</span>
                                            </div>
                                        </div>
                                        <div>
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[1].background }} !important;background-color:{{ agentStyle[1].background }} !important;color:{{ agentStyle[1].fontColor }} !important;font-size:{{ agentStyle[1].fontSize }}">
                                                <div>1001[小碗]</div>
                                                <div>就绪</div>
                                                <div>00:09:25</div>
                                            </button>
                                        </span>
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[41].background }} !important;background-color:{{ agentStyle[41].background }} !important;color:{{ agentStyle[41].fontColor }} !important;font-size:{{ agentStyle[41].fontSize }}">
                                                <div>1002[小李]</div>
                                                <div>振铃</div>
                                                <div>00:09:25</div>
                                            </button>
                                        </span>
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[42].background }} !important;background-color:{{ agentStyle[42].background }} !important;color:{{ agentStyle[42].fontColor }} !important;font-size:{{ agentStyle[42].fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>通话</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                        {% if agent_center.busy.if_hasreason == 1 %}
                                        {% for busy in agent_center.busy.busy_data %}
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ busy.style.background }} !important;background-color:{{ busy.style.background }} !important;color:{{ busy.style.fontColor }} !important;font-size:{{ busy.style.fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>{{ busy.name }}</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                        {% endfor %}
                                        {% else %}
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[2].background }} !important;background-color:{{ agentStyle[2].background }} !important;color:{{ agentStyle[2].fontColor }} !important;font-size:{{ agentStyle[2].fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>置忙</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                        {% endif %}
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[5].background }} !important;background-color:{{ agentStyle[5].background }} !important;color:{{ agentStyle[5].fontColor }} !important;font-size:{{ agentStyle[5].fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>事后处理</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            <!-- 创建panel END-->
                        {% endfor %}
                    {% else %}
                        <div class="alert alert-block alert-danger">
                            <button type="button" class="close" data-dismiss="alert">
                                <i class="ace-icon fa fa-times"></i>
                            </button>
                            <i class="ace-icon fa fa-times"></i>
                            未设置技能组指标
                        </div>
                    {% endif %}
                    <!-- 显示技能组话务数据End -->
                </div>
            </div>
            <div class="tab-pane" id="group">
                <div class="row" style="margin:1px;">
                    <!-- 显示业务组话务数据Begin -->
                    {% if is_group_show == 1 %}
                        {% for k,group in group_agInfo %}
                            <!-- 创建panel BEGIN-->
                            <div class="panel panel-info" id="group{{ group.group_id }}">
                                <div class="panel-heading">{{ group.group_name }}</div>
                                <div class="panel-body" style="padding: 2px;">
                                    {% for key,value in group_center %}
                                        <div class="progress" style="height:80px">
                                            {% for groups in value %}
                                                <div class="progress-bar" style="width: {{ groups.rate }};background-color: {{ groups.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                                    <span class="sr-only"> 10% Complete (success) </span>
                                                    <span style="font: 180% Arial; font-size: {{ groups.style.fontSize }};color: {{ groups.style.fontColor }} !important">{{ groups.name }}</span><br>
                                                    <span style="font: 200% Arial; font-size: {{ groups.style.fontSize }};color: {{ groups.style.fontColor }} !important" id="group{{ group.group_id }}_{{ groups.id }}">0</span>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    {% endfor %}
                                    {% if is_agent_show == 1 %}
                                        <div class="progress" style="height: 100%; padding-left: 0px;">
                                            <div class="progress-bar" style="background-color: {{ agentStyle[1].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[1].background }} !important">1</span>
                                            </div>
                                            <div class="progress-bar" style="background-color: {{ agentStyle[41].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[41].background }} !important">1</span>
                                            </div>
                                            <div class="progress-bar" style="background-color: {{ agentStyle[42].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[42].background }} !important">1</span>
                                            </div>
                                            {% if agent_center.busy.if_hasreason == 1 %}
                                                {% for busy in agent_center.busy.busy_data %}
                                                    <div class="progress-bar" style="background-color: {{ busy.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                        <span class="sr-only"> 10% Complete (success) </span>
                                                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ busy.style.background }} !important">1</span>
                                                    </div>
                                                {% endfor %}
                                            {% else %}
                                                <div class="progress-bar" style="background-color: {{ agentStyle[2].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                    <span class="sr-only"> 10% Complete (success) </span>
                                                    <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[2].background }} !important">1</span>
                                                </div>
                                            {% endif %}
                                            <div class="progress-bar" style="background-color: {{ agentStyle[5].background }};box-shadow: none;line-height: 20px;padding: 3px;width: {{ rates.agent_rate }}">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[5].background }} !important">1</span>
                                            </div>
                                        </div>
                                        <div>
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[1].background }} !important;background-color:{{ agentStyle[1].background }} !important;color:{{ agentStyle[1].fontColor }} !important;font-size:{{ agentStyle[1].fontSize }}">
                                                <div>1001[小碗]</div>
                                                <div>就绪</div>
                                                <div>00:09:25</div>
                                            </button>
                                        </span>
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[41].background }} !important;background-color:{{ agentStyle[41].background }} !important;color:{{ agentStyle[41].fontColor }} !important;font-size:{{ agentStyle[41].fontSize }}">
                                                <div>1002[小李]</div>
                                                <div>振铃</div>
                                                <div>00:09:25</div>
                                            </button>
                                        </span>
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[42].background }} !important;background-color:{{ agentStyle[42].background }} !important;color:{{ agentStyle[42].fontColor }} !important;font-size:{{ agentStyle[42].fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>通话</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                        {% if agent_center.busy.if_hasreason == 1 %}
                                        {% for busy in agent_center.busy.busy_data %}
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ busy.style.background }} !important;background-color:{{ busy.style.background }} !important;color:{{ busy.style.fontColor }} !important;font-size:{{ busy.style.fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>{{ busy.name }}</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                        {% endfor %}
                                        {% else %}
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[2].background }} !important;background-color:{{ agentStyle[2].background }} !important;color:{{ agentStyle[2].fontColor }} !important;font-size:{{ agentStyle[2].fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>置忙</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                        {% endif %}
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[5].background }} !important;background-color:{{ agentStyle[5].background }} !important;color:{{ agentStyle[5].fontColor }} !important;font-size:{{ agentStyle[5].fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>事后处理</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <!-- 创建panel END-->
                        {% endfor %}
                    {% else %}
                        <div class="alert alert-block alert-danger">
                            <button type="button" class="close" data-dismiss="alert">
                                <i class="ace-icon fa fa-times"></i>
                            </button>
                            <i class="ace-icon fa fa-times"></i>
                            未设置业务组指标
                        </div>
                    {% endif %}
                    <!-- 显示业务组话务数据End -->
                </div>
            </div>
        </div>
    </div>
    {% else %}
        {% if is_que_show == 1 %}
            <!-- 显示技能组话务数据Begin -->
            <div class="row" style="margin:1px;">
                {% for key,que in que_agInfo %}
                    <!-- 创建panel BEGIN-->
                    <div class="panel panel-info" id="que{{ que.id }}">
                        <div class="panel-heading">{{ que.que_name }}</div>
                        <div class="panel-body" style="padding: 2px;">
                            {% for key,value in que_center %}
                                <div class="progress" style="height:80px">
                                    {% for ques in value %}
                                        <div class="progress-bar" style="width: {{ ques.rate }};background-color: {{ ques.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                            <span class="sr-only"> 10% Complete (success) </span>
                                            <span style="font: 180% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important">{{ ques.name }}</span><br>
                                            <span style="font: 200% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important" id="que{{ que.id }}_{{ ques.id }}">0</span>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endfor %}
                            {% if is_agent_show == 1 %}
                                <div class="progress" style="height: 100%; padding-left: 0px;">
                                    <div class="progress-bar" style="background-color: {{ agentStyle[1].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                        <span class="sr-only"> 10% Complete (success) </span>
                                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[1].background }} !important">1</span>
                                    </div>
                                    <div class="progress-bar" style="background-color: {{ agentStyle[41].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                        <span class="sr-only"> 10% Complete (success) </span>
                                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[41].background }} !important">1</span>
                                    </div>
                                    <div class="progress-bar" style="background-color: {{ agentStyle[42].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                        <span class="sr-only"> 10% Complete (success) </span>
                                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[42].background }} !important">1</span>
                                    </div>
                                    {% if agent_center.busy.if_hasreason == 1 %}
                                        {% for busy in agent_center.busy.busy_data %}
                                            <div class="progress-bar" style="background-color: {{ busy.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ busy.style.background }} !important">1</span>
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        <div class="progress-bar" style="background-color: {{ agentStyle[2].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                            <span class="sr-only"> 10% Complete (success) </span>
                                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[2].background }} !important">1</span>
                                        </div>
                                    {% endif %}
                                    <div class="progress-bar" style="background-color: {{ agentStyle[5].background }};box-shadow: none;padding: 3px;line-height: 20px;width: {{ rates.agent_rate }}">
                                        <span class="sr-only"> 10% Complete (success) </span>
                                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[5].background }} !important">1</span>
                                    </div>
                                </div>
                                <div>
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[1].background }} !important;background-color:{{ agentStyle[1].background }} !important;color:{{ agentStyle[1].fontColor }} !important;font-size:{{ agentStyle[1].fontSize }}">
                                                <div>1001[小碗]</div>
                                                <div>就绪</div>
                                                <div>00:09:25</div>
                                            </button>
                                        </span>
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[41].background }} !important;background-color:{{ agentStyle[41].background }} !important;color:{{ agentStyle[41].fontColor }} !important;font-size:{{ agentStyle[41].fontSize }}">
                                                <div>1002[小李]</div>
                                                <div>振铃</div>
                                                <div>00:09:25</div>
                                            </button>
                                        </span>
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[42].background }} !important;background-color:{{ agentStyle[42].background }} !important;color:{{ agentStyle[42].fontColor }} !important;font-size:{{ agentStyle[42].fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>通话</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                    {% if agent_center.busy.if_hasreason == 1 %}
                                        {% for busy in agent_center.busy.busy_data %}
                                            <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ busy.style.background }} !important;background-color:{{ busy.style.background }} !important;color:{{ busy.style.fontColor }} !important;font-size:{{ busy.style.fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>{{ busy.name }}</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                        {% endfor %}
                                    {% else %}
                                        <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[2].background }} !important;background-color:{{ agentStyle[2].background }} !important;color:{{ agentStyle[2].fontColor }} !important;font-size:{{ agentStyle[2].fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>置忙</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                    {% endif %}
                                    <span>
                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[5].background }} !important;background-color:{{ agentStyle[5].background }} !important;color:{{ agentStyle[5].fontColor }} !important;font-size:{{ agentStyle[5].fontSize }}">
                                                <div>1003[小斯]</div>
                                                <div>事后处理</div>
                                                <div>00:09:20</div>
                                            </button>
                                        </span>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <!-- 创建panel END-->
                {% endfor %}
            </div>
            <!-- 显示技能组话务数据End -->
        {% endif %}
        {% if is_que_show == 0 and is_agent_show == 1 %}
            {% for key,que in que_agInfo %}
                <div class="panel panel-info" id="que{{ que.id }}">
                    <div class="panel-heading">{{ que.que_name }}</div>
                    <div class="panel-body" style="padding: 2px;">
                        <div class="progress" style="height: 100%; padding-left: 0px;">
                            <div class="progress-bar" style="background-color: {{ agentStyle[1].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[1].background }} !important">1</span>
                            </div>
                            <div class="progress-bar" style="background-color: {{ agentStyle[41].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[41].background }} !important">1</span>
                            </div>
                            <div class="progress-bar" style="background-color: {{ agentStyle[42].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[42].background }} !important">1</span>
                            </div>
                            {% if agent_center.busy.if_hasreason == 1 %}
                                {% for busy in agent_center.busy.busy_data %}
                                    <div class="progress-bar" style="background-color: {{ busy.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                        <span class="sr-only"> 10% Complete (success) </span>
                                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ busy.style.background }} !important">1</span>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div class="progress-bar" style="background-color: {{ agentStyle[2].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                    <span class="sr-only"> 10% Complete (success) </span>
                                    <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[2].background }} !important">1</span>
                                </div>
                            {% endif %}
                            <div class="progress-bar" style="background-color: {{ agentStyle[5].background }};box-shadow: none;padding: 3px;line-height: 20px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[5].background }} !important">1</span>
                            </div>
                        </div>
                        <div>
                    <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[1].background }} !important;background-color:{{ agentStyle[1].background }} !important;color:{{ agentStyle[1].fontColor }} !important;font-size:{{ agentStyle[1].fontSize }}">
                            <div>1001[小碗]</div>
                            <div>就绪</div>
                            <div>00:09:25</div>
                        </button>
                    </span>
                    <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[41].background }} !important;background-color:{{ agentStyle[41].background }} !important;color:{{ agentStyle[41].fontColor }} !important;font-size:{{ agentStyle[41].fontSize }}">
                            <div>1002[小李]</div>
                            <div>振铃</div>
                            <div>00:09:25</div>
                        </button>
                    </span>
                    <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[42].background }} !important;background-color:{{ agentStyle[42].background }} !important;color:{{ agentStyle[42].fontColor }} !important;font-size:{{ agentStyle[42].fontSize }}">
                            <div>1003[小斯]</div>
                            <div>通话</div>
                            <div>00:09:20</div>
                        </button>
                    </span>
                            {% if agent_center.busy.if_hasreason == 1 %}
                                {% for busy in agent_center.busy.busy_data %}
                                    <span>
                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ busy.style.background }} !important;background-color:{{ busy.style.background }} !important;color:{{ busy.style.fontColor }} !important;font-size:{{ busy.style.fontSize }}">
                                <div>1003[小斯]</div>
                                <div>{{ busy.name }}</div>
                                <div>00:09:20</div>
                            </button>
                        </span>
                                {% endfor %}
                            {% else %}
                                <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[2].background }} !important;background-color:{{ agentStyle[2].background }} !important;color:{{ agentStyle[2].fontColor }} !important;font-size:{{ agentStyle[2].fontSize }}">
                            <div>1003[小斯]</div>
                            <div>置忙</div>
                            <div>00:09:20</div>
                        </button>
                    </span>
                            {% endif %}
                            <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[5].background }} !important;background-color:{{ agentStyle[5].background }} !important;color:{{ agentStyle[5].fontColor }} !important;font-size:{{ agentStyle[5].fontSize }}">
                            <div>1003[小斯]</div>
                            <div>事后处理</div>
                            <div>00:09:20</div>
                        </button>
                    </span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    {% endif %}
</div>
{% else %}
    {% if is_call_show == 1 %}
        <!-- 显示呼叫中心话务数据Begin -->
        <div class="row" style="margin:1px;">
            {% for key,value in call_center %}
                <div class="progress" style="height:80px">
                    {% for call in value %}
                        <div class="progress-bar" style="background-color: {{ call.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ call.rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span style="font: 180% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important">{{ call.name }}</span><br>
                            <span style="font: 200% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important" id="{{ call.id }}">0</span>
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
        <!-- 显示呼叫中心话务数据End -->
    {% endif %}
    {% if is_que_show == 1 and user_type == 1 %}
        <!-- 显示技能组话务数据Begin -->
        <div class="row" style="margin:1px;">
        {% for key,que in qgInfo %}
            <!-- 创建panel BEGIN-->
            <div class="panel panel-info" id="que{{ que.id }}">
                <div class="panel-heading">{{ que.que_name }}</div>
                <div class="panel-body" style="padding: 2px;">
                    {% for key,value in que_center %}
                        <div class="progress" style="height:80px">
                            {% for ques in value %}
                                <div class="progress-bar" style="width: {{ ques.rate }};background-color: {{ ques.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                    <span class="sr-only"> 10% Complete (success) </span>
                                    <span style="font: 180% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important">{{ ques.name }}</span><br>
                                    <span style="font: 200% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important" id="que{{ que.id }}_{{ ques.id }}">0</span>
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                    {% if is_agent_show == 1 %}
                        <div class="progress" style="height: 100%; padding-left: 0px;">
                            <div class="progress-bar" style="background-color: {{ agentStyle[1].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[1].background }} !important">1</span>
                            </div>
                            <div class="progress-bar" style="background-color: {{ agentStyle[41].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[41].background }} !important">1</span>
                            </div>
                            <div class="progress-bar" style="background-color: {{ agentStyle[42].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[42].background }} !important">1</span>
                            </div>
                            {% if agent_center.busy.if_hasreason == 1 %}
                                {% for busy in agent_center.busy.busy_data %}
                                    <div class="progress-bar" style="background-color: {{ busy.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                        <span class="sr-only"> 10% Complete (success) </span>
                                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ busy.style.background }} !important">1</span>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div class="progress-bar" style="background-color: {{ agentStyle[2].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                    <span class="sr-only"> 10% Complete (success) </span>
                                    <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[2].background }} !important">1</span>
                                </div>
                            {% endif %}
                            <div class="progress-bar" style="background-color: {{ agentStyle[5].background }};box-shadow: none;padding: 3px;line-height: 20px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[5].background }} !important">1</span>
                            </div>
                        </div>
                        <div>
                            <span>
                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[1].background }} !important;background-color:{{ agentStyle[1].background }} !important;color:{{ agentStyle[1].fontColor }} !important;font-size:{{ agentStyle[1].fontSize }}">
                                    <div>1001[小碗]</div>
                                    <div>就绪</div>
                                    <div>00:09:25</div>
                                </button>
                            </span>
                            <span>
                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[41].background }} !important;background-color:{{ agentStyle[41].background }} !important;color:{{ agentStyle[41].fontColor }} !important;font-size:{{ agentStyle[41].fontSize }}">
                                    <div>1002[小李]</div>
                                    <div>振铃</div>
                                    <div>00:09:25</div>
                                </button>
                            </span>
                            <span>
                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[42].background }} !important;background-color:{{ agentStyle[42].background }} !important;color:{{ agentStyle[42].fontColor }} !important;font-size:{{ agentStyle[42].fontSize }}">
                                    <div>1003[小斯]</div>
                                    <div>通话</div>
                                    <div>00:09:20</div>
                                </button>
                            </span>
                            {% if agent_center.busy.if_hasreason == 1 %}
                                {% for busy in agent_center.busy.busy_data %}
                                <span>
                                    <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ busy.style.background }} !important;background-color:{{ busy.style.background }} !important;color:{{ busy.style.fontColor }} !important;font-size:{{ busy.style.fontSize }}">
                                        <div>1003[小斯]</div>
                                        <div>{{ busy.name }}</div>
                                        <div>00:09:20</div>
                                    </button>
                                </span>
                                {% endfor %}
                            {% else %}
                                <span>
                                    <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[2].background }} !important;background-color:{{ agentStyle[2].background }} !important;color:{{ agentStyle[2].fontColor }} !important;font-size:{{ agentStyle[2].fontSize }}">
                                        <div>1003[小斯]</div>
                                        <div>置忙</div>
                                        <div>00:09:20</div>
                                    </button>
                                </span>
                            {% endif %}
                            <span>
                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[5].background }} !important;background-color:{{ agentStyle[5].background }} !important;color:{{ agentStyle[5].fontColor }} !important;font-size:{{ agentStyle[5].fontSize }}">
                                    <div>1003[小斯]</div>
                                    <div>事后处理</div>
                                    <div>00:09:20</div>
                                </button>
                            </span>
                        </div>
                    {% endif %}
                </div>
            </div>
            <!-- 创建panel END-->
        </div>
        {% endfor %}
        <!-- 显示技能组话务数据End -->
    {% endif %}
    {% if is_group_show == 1 and user_type == 3 and isEnableGroup == 1 %}
        <!-- 显示业务组话务数据Begin -->
            <!-- 创建panel BEGIN-->
        {% for k,group in qgInfo %}
            <div class="panel panel-info" id="group{{ group.group_id }}">
                <div class="panel-heading">{{ group.group_name }}</div>
                <div class="panel-body" style="padding: 2px;">
                    {% for key,value in group_center %}
                        <div class="progress" style="height:80px">
                            {% for groups in value %}
                                <div class="progress-bar" style="width: {{ groups.rate }};background-color: {{ groups.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                    <span class="sr-only"> 10% Complete (success) </span>
                                    <span style="font: 180% Arial; font-size: {{ groups.style.fontSize }};color: {{ groups.style.fontColor }} !important">{{ groups.name }}</span><br>
                                    <span style="font: 200% Arial; font-size: {{ groups.style.fontSize }};color: {{ groups.style.fontColor }} !important" id="group{{ group.group_id }}_{{ groups.id }}">0</span>
                                </div>
                            {% endfor %}
                        </div>
                    {% endfor %}
                {% if is_agent_show == 1 %}
                    <div class="progress" style="height: 100%; padding-left: 0px;">
                        <div class="progress-bar" style="background-color: {{ agentStyle[1].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[1].background }} !important">1</span>
                        </div>
                        <div class="progress-bar" style="background-color: {{ agentStyle[41].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[41].background }} !important">1</span>
                        </div>
                        <div class="progress-bar" style="background-color: {{ agentStyle[42].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[42].background }} !important">1</span>
                        </div>
                        {% if agent_center.busy.if_hasreason == 1 %}
                            {% for busy in agent_center.busy.busy_data %}
                                <div class="progress-bar" style="background-color: {{ busy.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                    <span class="sr-only"> 10% Complete (success) </span>
                                    <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ busy.style.background }} !important">1</span>
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="progress-bar" style="background-color: {{ agentStyle[2].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[2].background }} !important">1</span>
                            </div>
                        {% endif %}
                        <div class="progress-bar" style="background-color: {{ agentStyle[5].background }};box-shadow: none;line-height: 20px;padding: 3px;width: {{ rates.agent_rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[5].background }} !important">1</span>
                        </div>
                    </div>
                    <div >
                            <span>
                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[1].background }} !important;background-color:{{ agentStyle[1].background }} !important;color:{{ agentStyle[1].fontColor }} !important;font-size:{{ agentStyle[1].fontSize }}">
                                    <div>1001[小碗]</div>
                                    <div>就绪</div>
                                    <div>00:09:25</div>
                                </button>
                            </span>
                            <span>
                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[41].background }} !important;background-color:{{ agentStyle[41].background }} !important;color:{{ agentStyle[41].fontColor }} !important;font-size:{{ agentStyle[41].fontSize }}">
                                    <div>1002[小李]</div>
                                    <div>振铃</div>
                                    <div>00:09:25</div>
                                </button>
                            </span>
                            <span>
                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[42].background }} !important;background-color:{{ agentStyle[42].background }} !important;color:{{ agentStyle[42].fontColor }} !important;font-size:{{ agentStyle[42].fontSize }}">
                                    <div>1003[小斯]</div>
                                    <div>通话</div>
                                    <div>00:09:20</div>
                                </button>
                            </span>
                        {% if agent_center.busy.if_hasreason == 1 %}
                            {% for busy in agent_center.busy.busy_data %}
                                <span>
                                    <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ busy.style.background }} !important;background-color:{{ busy.style.background }} !important;color:{{ busy.style.fontColor }} !important;font-size:{{ busy.style.fontSize }}">
                                        <div>1003[小斯]</div>
                                        <div>{{ busy.name }}</div>
                                        <div>00:09:20</div>
                                    </button>
                                </span>
                            {% endfor %}
                        {% else %}
                            <span>
                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[2].background }} !important;background-color:{{ agentStyle[2].background }} !important;color:{{ agentStyle[2].fontColor }} !important;font-size:{{ agentStyle[2].fontSize }}">
                                    <div>1003[小斯]</div>
                                    <div>置忙</div>
                                    <div>00:09:20</div>
                                </button>
                            </span>
                        {% endif %}
                        <span>
                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[5].background }} !important;background-color:{{ agentStyle[5].background }} !important;color:{{ agentStyle[5].fontColor }} !important;font-size:{{ agentStyle[5].fontSize }}">
                                <div>1003[小斯]</div>
                                <div>事后处理</div>
                                <div>00:09:20</div>
                            </button>
                        </span>
                    </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
        <!-- 创建panel END-->
        <!-- 显示业务组话务数据End -->
    {% endif %}
    {% if is_que_show == 0 and is_group_show == 0 and is_agent_show == 1 %}
        <!-- 显示坐席监控数据Begin -->
        {% if agent_center.type == 1 %}
            <!-- 按技能组方式显示 -->
        {% for key,que in qgInfo %}
        <div class="panel panel-info" id="que{{ que.id }}">
            <div class="panel-heading">{{ que.que_name }}</div>
            <div class="panel-body" style="padding: 2px;">
                <div class="progress" style="height: 100%; padding-left: 0px;">
                    <div class="progress-bar" style="background-color: {{ agentStyle[1].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                        <span class="sr-only"> 10% Complete (success) </span>
                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[1].background }} !important">1</span>
                    </div>
                    <div class="progress-bar" style="background-color: {{ agentStyle[41].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                        <span class="sr-only"> 10% Complete (success) </span>
                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[41].background }} !important">1</span>
                    </div>
                    <div class="progress-bar" style="background-color: {{ agentStyle[42].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                        <span class="sr-only"> 10% Complete (success) </span>
                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[42].background }} !important">1</span>
                    </div>
                    {% if agent_center.busy.if_hasreason == 1 %}
                        {% for busy in agent_center.busy.busy_data %}
                            <div class="progress-bar" style="background-color: {{ busy.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ busy.style.background }} !important">1</span>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="progress-bar" style="background-color: {{ agentStyle[2].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[2].background }} !important">1</span>
                        </div>
                    {% endif %}
                    <div class="progress-bar" style="background-color: {{ agentStyle[5].background }};box-shadow: none;padding: 3px;line-height: 20px;width: {{ rates.agent_rate }}">
                        <span class="sr-only"> 10% Complete (success) </span>
                        <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[5].background }} !important">1</span>
                    </div>
                </div>
                <div>
                    <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[1].background }} !important;background-color:{{ agentStyle[1].background }} !important;color:{{ agentStyle[1].fontColor }} !important;font-size:{{ agentStyle[1].fontSize }}">
                            <div>1001[小碗]</div>
                            <div>就绪</div>
                            <div>00:09:25</div>
                        </button>
                    </span>
                    <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[41].background }} !important;background-color:{{ agentStyle[41].background }} !important;color:{{ agentStyle[41].fontColor }} !important;font-size:{{ agentStyle[41].fontSize }}">
                            <div>1002[小李]</div>
                            <div>振铃</div>
                            <div>00:09:25</div>
                        </button>
                    </span>
                    <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[42].background }} !important;background-color:{{ agentStyle[42].background }} !important;color:{{ agentStyle[42].fontColor }} !important;font-size:{{ agentStyle[42].fontSize }}">
                            <div>1003[小斯]</div>
                            <div>通话</div>
                            <div>00:09:20</div>
                        </button>
                    </span>
                    {% if agent_center.busy.if_hasreason == 1 %}
                        {% for busy in agent_center.busy.busy_data %}
                            <span>
                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ busy.style.background }} !important;background-color:{{ busy.style.background }} !important;color:{{ busy.style.fontColor }} !important;font-size:{{ busy.style.fontSize }}">
                                <div>1003[小斯]</div>
                                <div>{{ busy.name }}</div>
                                <div>00:09:20</div>
                            </button>
                        </span>
                        {% endfor %}
                    {% else %}
                        <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[2].background }} !important;background-color:{{ agentStyle[2].background }} !important;color:{{ agentStyle[2].fontColor }} !important;font-size:{{ agentStyle[2].fontSize }}">
                            <div>1003[小斯]</div>
                            <div>置忙</div>
                            <div>00:09:20</div>
                        </button>
                    </span>
                    {% endif %}
                    <span>
                        <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[5].background }} !important;background-color:{{ agentStyle[5].background }} !important;color:{{ agentStyle[5].fontColor }} !important;font-size:{{ agentStyle[5].fontSize }}">
                            <div>1003[小斯]</div>
                            <div>事后处理</div>
                            <div>00:09:20</div>
                        </button>
                    </span>
                </div>
            </div>
        </div>
        {% endfor %}
        {% else %}
            <!-- 按业务组方式显示 -->
            {% if isEnableGroup == 1 %}
            {% for k,group in qgInfo %}
            <div class="panel panel-info" id="group{{ group.group_id }}">
                <div class="panel-heading">{{ group.group_name }}</div>
                <div class="panel-body" style="padding: 2px;">
                    <div class="progress" style="height: 100%; padding-left: 0px;">
                        <div class="progress-bar" style="background-color: {{ agentStyle[1].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[1].background }} !important">1</span>
                        </div>
                        <div class="progress-bar" style="background-color: {{ agentStyle[41].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[41].background }} !important">1</span>
                        </div>
                        <div class="progress-bar" style="background-color: {{ agentStyle[42].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[42].background }} !important">1</span>
                        </div>
                        {% if agent_center.busy.if_hasreason == 1 %}
                            {% for busy in agent_center.busy.busy_data %}
                                <div class="progress-bar" style="background-color: {{ busy.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                    <span class="sr-only"> 10% Complete (success) </span>
                                    <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ busy.style.background }} !important">1</span>
                                </div>
                            {% endfor %}
                        {% else %}
                            <div class="progress-bar" style="background-color: {{ agentStyle[2].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[2].background }} !important">1</span>
                            </div>
                        {% endif %}
                        <div class="progress-bar" style="background-color: {{ agentStyle[5].background }};box-shadow: none;padding: 3px;line-height: 20px;width: {{ rates.agent_rate }}">
                            <span class="sr-only"> 10% Complete (success) </span>
                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[5].background }} !important">1</span>
                        </div>
                    </div>
                    <div >
                        <span>
                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[1].background }} !important;background-color:{{ agentStyle[1].background }} !important;color:{{ agentStyle[1].fontColor }} !important;font-size:{{ agentStyle[1].fontSize }}">
                                <div>1001[小碗]</div>
                                <div>就绪</div>
                                <div>00:09:25</div>
                            </button>
                        </span>
                        <span>
                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[41].background }} !important;background-color:{{ agentStyle[41].background }} !important;color:{{ agentStyle[41].fontColor }} !important;font-size:{{ agentStyle[41].fontSize }}">
                                <div>1002[小李]</div>
                                <div>振铃</div>
                                <div>00:09:25</div>
                            </button>
                        </span>
                        <span>
                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[42].background }} !important;background-color:{{ agentStyle[42].background }} !important;color:{{ agentStyle[42].fontColor }} !important;font-size:{{ agentStyle[42].fontSize }}">
                                <div>1003[小斯]</div>
                                <div>通话</div>
                                <div>00:09:20</div>
                            </button>
                        </span>
                        {% if agent_center.busy.if_hasreason == 1 %}
                            {% for busy in agent_center.busy.busy_data %}
                                <span>
                                    <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ busy.style.background }} !important;background-color:{{ busy.style.background }} !important;color:{{ busy.style.fontColor }} !important;font-size:{{ busy.style.fontSize }}">
                                        <div>1003[小斯]</div>
                                        <div>{{ busy.name }}</div>
                                        <div>00:09:20</div>
                                    </button>
                                </span>
                            {% endfor %}
                        {% else %}
                            <span>
                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[2].background }} !important;background-color:{{ agentStyle[2].background }} !important;color:{{ agentStyle[2].fontColor }} !important;font-size:{{ agentStyle[2].fontSize }}">
                                    <div>1003[小斯]</div>
                                    <div>置忙</div>
                                    <div>00:09:20</div>
                                </button>
                            </span>
                        {% endif %}
                        <span>
                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[5].background }} !important;background-color:{{ agentStyle[5].background }} !important;color:{{ agentStyle[5].fontColor }} !important;font-size:{{ agentStyle[5].fontSize }}">
                                <div>1003[小斯]</div>
                                <div>事后处理</div>
                                <div>00:09:20</div>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            {% endfor %}
            {% endif %}
        {% endif %}
        <!-- 显示坐席监控数据End -->
    {% endif %}
{% endif %}
{% endblock %}